<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        .container {  
            position: relative;  
            width: 200px;  
            height: 200px;  
            background-color: #ddd;  
        }  
        .overlay1, .overlay2 {
            position: absolute;  
            width: 100px;  
            height: 100px;  
        }  
        .overlay1 {  
            background-color: rgba(255, 0, 0, 0.5);  
/*            top: 20px;  
            left: 20px; */ 
        }  
        .overlay2 {  
            background-color: rgba(0, 255, 0, 0.5);  
            top: 50px;  
            left: 50px;  
        }  
    </style>  
</head>  
<body>  
  
<div class="container">  
    <div class="overlay1"></div>  
    <div class="overlay2"></div>  
</div>  
  
</body>  
</html>